<template>
  <div  class="app-container"  v-loading="loading">
    <div style="font-size: 14px;color: #9d9d9d;margin-left: 30px">
      功能描述：分组发布不可指定视频，将会根据文件夹路径随机发布，发布后会删除视频以保证唯一性(只支持视频号发布)
    </div>

    <div style="margin-top: 30px;">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="选择分组" prop="accountId">
              <el-button v-if="!currentRow.id" @click="selectGroup">
                选择分组
              </el-button>
              <el-tag  v-else style="margin-left: 10px;cursor:pointer;" @click="selectAccount" >{{currentRow.nickname}}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

<!--      添加分组选择   -->
      <el-dialog title="分组账号选择" :visible.sync="open" :before-close="handleClose"  width="800px" append-to-body>

      <el-table v-loading="loading" :data="accountGroupList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="分组标题" align="center" prop="groupTitle" />
        <el-table-column label="该分组账号数" align="center" prop="accountCount" >
          <template slot-scope="scope">
            <div>
              {{scope.row.accountList.length}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="分组账号昵称" align="center" prop="accountId" >
          <template slot-scope="scope">
            <div>
              <template v-for="account in scope.row.accountList">
                <div>{{ account.nickname }}</div>
              </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="分组账号头像" align="center" prop="accountId" >
          <template slot-scope="scope">
            <div>
              <template v-for="account in scope.row.accountList">
                <img style="height: 30px;width: 30px;border-radius: 15px" :src="account.headImgUrl" />
              </template>
            </div>
          </template>
        </el-table-column>
<!--        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button-->
<!--              size="mini"-->
<!--              type="text"-->
<!--              icon="el-icon-edit"-->
<!--              @click="handleUpdate(scope.row)"-->
<!--              v-hasPermi="['media:accountGroup:edit']"-->
<!--            >修改</el-button>-->
<!--            <el-button-->
<!--              size="mini"-->
<!--              type="text"-->
<!--              icon="el-icon-delete"-->
<!--              @click="handleDelete(scope.row)"-->
<!--              v-hasPermi="['media:accountGroup:remove']"-->
<!--            >删除</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
        <div slot="footer" class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitFormGroupData">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>


    </div>
  </div>
</template>
<script>
import { listAccountGroup, getAccountGroup, delAccountGroup, addAccountGroup, updateAccountGroup } from "@/api/media/accountGroup";
import { listMediaAccount, getAccount, delAccount, addAccount, updateAccount } from "@/api/media/mediaAccount";
import { publishVideo } from "@/api/media/channelsPublish";
import {Message} from "element-ui";
import { listPublishRecord, addPublishRecord} from "@/api/media/publishRecord";
import store from "@/store";
export default {
  name: "videoPublish",
  data() {
    return {
      buttonLoading:false,
      checkAccountVisable:false,
      percent: 50, // the percentage of the progress bar
      color: '#409EFF', // the color of the progress bar
      strokeWidth: 15, // the width of the progress bar stroke
      loading:false,
      total:0,
      accUser:[],
      open:false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      activeName:'one',
      checkAll: false,
      currentRow:{},
      accountGroupList:{},
      form:{
        link:undefined,
        publishType:'1',
        description:undefined,
        accountId:undefined,
        publishTime:undefined,
        filePath: undefined,
        shortTitle:undefined,
        mode:'0'
      },
      dialogVisible:false,
      publishTime:'',
      rules:{
        accountId: [
          { required: true, message: "账号不能为空", trigger: "blur" }
        ],
        filePath:[
          { required: true, message: "视频文件不能为空", trigger: "blur" }
        ],
        publishTime:[
        { required: true, message: "发布时间不能为空", trigger: "blur" }
        ]
      },
      queryParams:{},
      dir_path:'',
      isIndeterminate: true,
      accountList:[]
    };
  },
  created() {
    // this.getList();
  },
  methods: {


    /** 查询账号分组列表 */
    // getList() {
    //   this.loading = true;
    //   listAccountGroup(this.queryParams).then(response => {
    //     this.accountGroupList = response.rows;
    //     console.log(this.accountGroupList)
    //     this.total = response.total;
    //     this.loading = false;
    //   });
    //
    // },


    /**
     * 打开分组model
     */
    selectGroup(){
      this.open = true;
    },


    /**
     * 确定选中该分组
     */
    submitFormGroupData(){

    },

    /**
     * 关闭model
     */
    handleClose(){
        this.open = false
    },

    /**
     * 选择账号时弹框选择对应账号
     */
    selectAccount(){
      this.checkAccountVisable = true;
    },

    /**
     * 重置按钮
     */
    resetQuery(){
      this.queryParams = {}
        this.getList()
    },


    /**
     * 选中账号信息
     */
    checkAccountData(){
      if(this.currentRow.loginStatus === 0){
        Message.error("当前选中账号已掉线，请登录后操作！")
        return;
      }
      console.log(this.currentRow)
      this.checkAccountVisable = false;
      console.log(this.ids)
    },

    /**
     * 关闭表格弹框
     */
    cancel(){
       this.handleClose()
    },


    /**
     * 选择是否原创发布
     */
    showOriginalityDialog(){
        this.$confirm('原创内容将受平台保护，盗用原创内容将受到平台处罚。', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.form.mode = '1';
        }).catch(() => {
          this.form.mode = '0';
        });
    },


    // 多选框选中数据
    handleSelectionChange(val) {
      console.log(val)
      this.currentRow = val;
      // this.checkAccountVisable = false;
    },


    /**
     * 选择文件夹
     */
    async selectDir(num) {
      const self = this;
      if(num === 1){
        const result =  await  this.serviceInvoke("controller.example.selectFolder",2) //文件上传
        this.form.filePath = result.path
      }else{
        const result =  await  this.serviceInvoke("controller.example.selectFolder",1)  //文件夹上传
        this.form.filePath = result.path
      }
    },

    // 表单重置
    reset() {
      this.form = {
        link:undefined,
        publishType:'1',
        description:undefined,
        accountId:undefined,
        publishTime:undefined,
        filePath: undefined,
        shortTitle:undefined,
        mode:'0'
      };
    },

    /**
     * 改变行样式
     * @param row
     * @param rowIndex
     */
    rowStyle({row, rowIndex}){
      if(this.currentRow.id === row.id){
        return 'checked'
      }else{
        return 'noChecked'
      }
    },



    /**
     * 发布视频
     */
   async  submitForm(){
      if(!this.currentRow.id){
        Message.error("请选择账号！")
        return;
      }
      if(!this.form.filePath){
        Message.error("请选择视频文件！")
        return;
      }
      if(this.form.publishType ===  '2' && !this.form.publishTime){
        Message.error("请选择发布时间！")
        return;
      }
        let args = {
          username:store.getters.name,  //添加队列用不到，发布接口需要
          accountId:this.currentRow.id,
          filePath:this.form.filePath,
          description:this.form.description,
          link:this.form.link,
          shortTitle:this.form.shortTitle,
          mode:this.form.mode,
          effectiveTime: this.form.publishTime ? Number(this.form.publishTime.getTime() / 1000) : undefined
        }

        //先提交到任务队列中   添加队列的逻辑
        addPublishRecord(args).then(async (res)=>{
          if(res.code === 200){
           await  publishVideo(args).then((res)=>{
              console.log(res)
            })
          }
        })

        //发布视频   视频发布成功后清空form表单数据


        //重置参数
        this.reset();

         Message.success("发布任务已提交，请在发布记录中查看！")

  },


  }
};
</script>
<style>

.el-table .checked {
  background: #051226 !important;
  cursor: pointer;
  transition: all .3s;
}

.el-table .noChecked {
  cursor: pointer;
  background: #fcfcfc !important;
}
</style>
